<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/mystyle.css">
    <title>register</title>
    <style>

        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        p,.sexDiv {
            margin-top: 10px;
            margin-left: 20px;
            color: azure;
        }


        input, select {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 140px;
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            padding-left: 10px;
        }


        h1 {
            text-align: center;
            margin-bottom: 20px;
            margin-top: 20px;
            color: #f0edf3;
        }
        b {
            margin-left: 50px;
            color: #FFEB3B;
            font-size: 10px;
            font-weight: initial;
        }
    </style>
</head>

<body>
<div id="loginDiv">
    <form action="/do_register" method="post">
        <h1>注册</h1>
        <p><label for="userNname">用户姓名:</label>
            <input id="userNname" name="username" type="text" autofocus required>
            <label id="name_trip"></label></p>
        <p>用户密码:<input id="password" type="password"  required><label id="password_trip"></label></p>
        <p>确认密码:<input id="surePassword" type="password" required><label id="surePassword_trip"></label></p>
        <p>
            用户类型:
            <select name="type" id="userType">
                <option value="0">请选择</option>
                <option value="1">普通类型</option>
                <option value="2">VIP类型</option>
            </select>
            <label id="type_trip"></label>
        </p>
        <div class="sexDiv">
            用户性别:
            <input class="userSex" name="sex" value="1" type="radio">男
            <input class="userSex" name="sex" value="0" type="radio">女
            <label id="sex_trip"></label>
        </div>
        <p>
            出生日期:
            <input id="birthday" type="date">
            <label id="birthday_trip"></label>
        </p>
        <p class="hobby">
            兴趣爱好:
            <input type="checkbox" name="hobby" value="read">阅读
            <input type="checkbox" name="hobby" value="music">音乐
            <input type="checkbox" name="hobby" value="sport">运动
            <label id="hobby_trip"></label>
        </p>
        <p>
            电子邮件:
            <input id="email" type="email" required>
            <label id="emil_trip"></label>
        </p>
        <p> 自我介绍:</p>
        <div class="introduce">
            <textarea name="introduce" cols="30" id="introduceText" required rows="10"></textarea>
            <label id="introduce_trip"></label>
        </div>
        <p style="text-align: center;">
            <input type="submit" class="button" onclick="return submitT()"  value="提交">
            <input type="reset" class="button" value="重置">
        </p>
    </form>
</div>
<script src="js/myscript.js"></script>
</body>
</html>